<template>
  <a-card :bordered="false">

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        v-if="dataSource.length > 0"
        rowKey="dataId"
        :columns="columns"
        size="large"
        :pagination="false"
        :dataSource="dataSource"
        :loading="loading">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.dataId)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>

    </div>
    <!-- table区域-end -->

    <template-modal ref="modalForm" @ok="modalFormOk"></template-modal>

  </a-card>
</template>

<script>
  import { postAction, deleteAction  } from '@/api/manage'
  import TemplateModal from './modules/TemplateModal'
import { mapGetters } from 'vuex'
  const columns = [
    {
      title: '打卡模板名称',
      dataIndex: 'signInName',
      key: 'signInName',
      width: 150,
    },
    {
      title: '编辑时间',
      dataIndex: 'editTime',
      key: 'editTime',
      width: 150,
      align: 'center'
    },
    {
      title: '编辑人',
      dataIndex: 'editor',
      key: 'editor',
      width: 150,
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 150
    }
  ]

  export default {
    name: 'ClockInTemplate',
    components: {
      TemplateModal
    },
    data() {
      return {
        // 表头
        columns: columns,
        dataSource: [],
        loading: false
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      ...mapGetters(['doctorId', 'orgCode']),
      loadData() {
        this.loading = true
        this.dataSource = []
        postAction('signin/template/list', {doctorId: this.doctorId(), orgCode: this.orgCode()}).then((res) => {
          if (res.success) {
            console.log(res.result)
            this.dataSource = res.result
          }
        }).finally(_ => {
          this.loading = false
        })
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleAdd: function () {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        var that = this;
        deleteAction('signin/template/remove', {id: id}).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      modalFormOk() {
        // 新增/修改 成功时，重载列表
        this.loadData();
      }
    }
  }
</script>